<template>
  <el-dialog append-to-body
             :close-on-click-modal="false"
             :visible.sync="syncVisible"
             width="300px"
             @close="doCancel"
             @open="doOpen"
             v-el-drag-dialog>
    <template #title>
      <span class="el-dialog__title">
        <ju-icon class="me-1"
                 icon="box-arrow-up-right"
                 svg-icon />导出数据
      </span>
    </template>
    <section class="py-3 px-5">
      <el-radio-group v-model="exportCommand">
        <div class="py-2">
          <el-radio label="exportAll">导出查询结果</el-radio>
        </div>
        <div class="py-2">
          <el-radio label="exportPage">导出本页</el-radio>
        </div>
        <div class="py-2">
          <el-radio :disabled="!RowCheckedCount"
                    label="exportCheck">导出选中
            <small class="ms-1">（已选中<span class="text-danger mx-1">{{ RowCheckedCount }}</span>条）</small>
          </el-radio>
        </div>
      </el-radio-group>
    </section>
    <template #footer>
      <div class="text-end dialog-footer">
        <el-button type="primary"
                   @click.stop="doExport">
          <ju-icon class="me-1"
                   icon="box-arrow-up-right"
                   svg-icon />导出
        </el-button>
        <el-button type="default"
                   @click.stop="doCancel">
          <ju-icon class="me-1"
                   icon="arrow-return-left"
                   svg-icon />取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
  import { Component, Mixins, Prop } from "@some21/vue-class-decorator";
  import DialogMixins from "@/mixins/DialogMixins";

  @Component({
    name: "DialogExportData",
  })
  export default class extends Mixins(DialogMixins) {
    @Prop({ type: Number, default: false })
    RowCheckedCount: number;

    exportCommand = "exportAll";

    doOpen() {
      this.exportCommand = "exportAll";
    }

    doExport() {
      this.$emit("command", this.exportCommand);
      this.syncVisible = false;
    }
  }
</script>

<style lang="scss" scoped>
</style>
